<template>
    <div class="card-item">
        <div class="header" :id="data[props.title]" ref="head">
            <div class="left">
                <div 
                v-if="data[props.icon]"
                class="icon"
                >
                    <img 
                        :src="data[props.icon]" 
                        :alt="data[props.title]"
                    />
                </div>

                <div class="title">
                    {{data[props.title]}}
                </div>
            </div>

            <div class="center">
                <slot name="header"></slot>
            </div>

            <div class="right">
                <slot name="header-append"></slot>
            </div>
        </div>

        <div class="body">
            <skeleton
                v-if="!data[props.children].length"
            ></skeleton>

            <div 
            v-for="(item, index) in data[props.children]"
            :key="index"
            class="item"
            v-czc="['首页', '点击按钮', `${data[props.title]}-${item.name}`, index + 1, 'home-btn-right-nav-item']"
            >
                <list-item 
                    :data="item" 
                    :layout="itemLayout"
                    @update="$emit('update')"
                ></list-item>
            </div>
        </div>

        <div class="footer">

        </div>
    </div>
</template>

<script>
import ListItem from './list-item.vue';
import Skeleton from './skeleton.vue';

export default {
    components: {
        ListItem,
        Skeleton,
    },
    props: {
        data: {
            type: Object,
            default: () => ({}),
        },
        props: {
            type: Object,
            default: () => ({
                title: 'title',
                icon: 'imgurl',
                children: 'content',
            }),
        },
        itemLayout: {
            type: String,
            default: 'add',
        },
    },
    data() {
        return {
            
        };
    },
    methods: {
        
    },
    mounted() {
        
    },
    beforeDestroy() {
        
    },
};
</script>

<style lang="scss" scoped>
    .card-item {
        display: flex;
        flex-direction: column;
        background: white;

        .header{
            display: flex;
            align-items: center;
            height: 54px;
            border-bottom: 1px solid #eeeeee;
            padding: 0 20px;
            cursor: default;

            .left{
                display: flex;
                align-items: center;

                .icon{
                    margin-right: 8px;
                    img{
                        display: block;
                        width: 21px;
                        height: 21px;
                    }
                }

                .title{
                    font-size: 16px;
                    color: #2d2d2d;
                    font-weight: bold;
                }
            }

            .center{
                flex: 1;
                margin-left: 25px;
            }
        }

        .body{
            display: flex;
            padding: 10px 10px 30px;
            flex-wrap: wrap;

            .item{
                flex: 0 1 25%;
                overflow: hidden;
                padding: 0 10px;
            }
        }

        & + .card-item{
            margin-top: 20px;
        }
    }
</style>
